<div class="card mb-4">
  <div class="card-header">Category</div>
  <div class="card-body" ng-init="$ctrl.loadData()">
    <div class="row">
      <div class="col-12">
        <input
          type="text"
          placeholder="Enter new category then press enter to create new one"
          ng-model="$ctrl.newTitle"
          ng-enter="$ctrl.createData()"
        />
      </div>
    </div>
    <div class="row">
      <div class="col-12" ng-repeat="item in $ctrl.selectedList">
        <checkbox-switch
          value="item.dataId"
          is-selected="$ctrl.isSelected(item.dataId)"
          callback="$ctrl.select(value, isSelected)"
          description="item.data[$ctrl.columnDisplay]"
        >
        </checkbox-switch>
      </div>
    </div>
    <div class="row">
      <div
        class="col-12"
        ng-repeat="item in $ctrl.data.items"
        ng-hide="item.disabled"
      >
        <checkbox-switch
          value="item.dataId"
          is-selected="$ctrl.isSelected(item.dataId)"
          callback="$ctrl.select(value, isSelected)"
          description="item.data[$ctrl.columnDisplay]"
          >>
        </checkbox-switch>
      </div>
    </div>
  </div>
  <div class="card-footer">
    <paging
      class="small"
      page="$ctrl.data.page"
      page-size="$ctrl.data.pageSize"
      total="$ctrl.data.totalItems"
      ul-class="pagination justify-content-end m-0"
      a-class="page-link"
      paging-action="$ctrl.loadPosts(page-1)"
      scroll-top="true"
    >
    </paging>
  </div>
</div>
